<template>
  <div id="dataStatistics">
    <div ref="myChart" :style="{width: '1000px', height: '500px'}"></div>
  </div>
</template>
<script>
  export default {
    name: "DataCount",
    data: () => ({
      msg: 'Welcome to Your Vue.js App',
      allCategories:[{
        id:1,
        name:'hahah'
      },
        {
          id:2,
          name:'jjj'
        },
      ],
      category:1,
      pvData:[],
      date:[],
    }),
    mounted(){
      this.getData();
    },
    methods:{
      getData(){
        const _this = this;
        this.axios({
          method:'post',
          url:"http://localhost:8081/getCategories"
        }).then(function (resp) {
          _this.date=resp.data;
          console.log(_this.date)
          _this.axios({
            method:'post',
            url:"http://localhost:8081/getDataStatistics"
          }).then(function (resp) {
            _this.pvData=resp.data;
            console.log(_this.pvData)
            _this.drawLine();
          });
        });
      },
      drawLine(){
        const _this = this;
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(this.$refs.myChart);
        // 绘制图表
        myChart.setOption({
          title: {
            text: '',
            subtext: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data:['最高','最低']
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: _this.date
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          },
          series: [
            {
              name:'最高',
              type:'line',
              data:_this.pvData,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            },
            {
              name:'最低',
              type:'line',
              data:_this.pvData,
              markPoint: {
                data: [
                  {name: '周最低', value: 2, xAxis: 1, yAxis: 1.5}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'},
                  [{
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  }, {
                    symbol: 'circle',
                    label: {
                      normal: {
                        position: 'start',
                        formatter: '最大值'
                      }
                    },
                    type: 'max',
                    name: '最高点'
                  }]
                ]
              }
            }
          ]
        });
      }
    }
  }
</script>

<style scoped>
#dataStatistics{
  width:calc(100% - 20px) ;
  padding: 20px 10px;
}
</style>
